<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  >
				<!-- 配送车辆-->
				<view class="text-box">
					<text>配送车牌号码：{{name}}</text>
				</view>
			</view>
			<!-- 待配送商户已配送商户区域 -->
			<view class="model">
				<view class="dataRap">
					<view class="onlyOne">
						<view class="modelrt">
							<text>包裹</text>
							<text class="psnums"><text class="psnum">{{baoguonum}}</text>个</text>
						</view>
					</view>
					<text class="modeline"></text>
					<view class="onlyOne">
						<view class="modelrt">
							<text>香烟</text>
							<text class="psnums"><text class="psnum">{{yannum}}</text>条</text>
						</view>
					</view>
					<text class="modeline"></text>
					<view class="onlyOne">
						<view class="modelrt">
							<text>已验签</text>
							<text class="psnums"><text class="psnum">{{yanqiannum}}</text>条</text>
						</view>
					</view>
				</view>
				<view class="dataRap">
				<view class="onlyOne">
					<view class="modelrt">
						<text>异常</text>
						<text class="psnums"><text class="psnum" style="color: #f63b3b;">{{yichangnum}}</text>条</text>
					</view>
				</view>
				<text class="modeline"></text>
				<view class="onlyOne">
					<view class="modelrt">
						<text>已送达</text>
						<text class="psnums"><text class="psnum" style="color: #4e4eff;">{{DeliveredNumber}}</text>条</text>
					</view>
				</view>
				<text class="modeline"></text>
				<view class="onlyOne">
					<view class="modelrt">
						<text>未送达</text>
						<text class="psnums"><text class="psnum" style="color: #ef0000;">{{NonDeliveryNumber}}</text>条</text>
					</view>
				</view>
				</view>
			</view>

			<view class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view  v-for="(item,i) in contents"  class="tableBox">
					<view class="tabletitle">配送详情</view>
					<view class="table">
						<view class="bgName"> 
							<text>包裹{{i+1}}</text>
							<text>包裹编码：<text>{{item.packageCode}}</text></text>
						</view>	
						<wyb-table 
						:key="key"
						show-vert-border="false" 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						height='342px'
						content-ft-color="#333333"  
						header-weight="true" 
						border-color="#ffffff"
						ref="table" 
						:headers="headers" 
						:contents="item.deliveryPackageRowList" 
						width="100%"
						:show-vert-border="vertborder"
						:loading="loading"
						:url-col="urlCol"
						@onCheck="onCheck"
						@onCellClick="onCellClick"
						@onButtonClick="onButtonClick"
						  />			
					</view>
				</view>				
			</view>
			<!-- 查看异常图片 -->
			<popupConfirm ref="tableConfirm">
				<view class="popup-info">
					<view type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</view>
					<view class="popuptitle">异常图片</view>
					<form class="form">
						<view class="uni-list-cell" style="line-height: 90rpx;">
							<view class="uni-list-cell-left">状态</view>
							<view class="uni-list-cell-db">
								<text>异常</text>
							</view>
						</view>
						<view class="uni-list-cell" style="line-height: 90rpx;">
							<view class="uni-list-cell-left">异常内容</view>
							<view class="uni-list-cell-db">
								<text>{{errerTypeText.exceptionCode}}</text>
							</view>
						</view>
					    <view  v-if="errerTypeText.exceptionDescShow" class="uni-list-cell" style="line-height: 90rpx;">
					    	<text style=" padding: 0 30rpx;">{{errerTypeText.exceptionDesc}}</text>
					    </view>
						<view class="imgWra">
							<view class="up-check"><image  :src="imgurl"></image></view><!-- mode="widthFix" -->
						</view>
						</form>
				
				</view>
			</popupConfirm>
		</view>
	</view>
</template>

<script>
	// 表格
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import {selectShopPackage,dictionaryList} from '@/api/request.js';
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		components: {
			// 表格
			wybTable
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				//获取高度
				heightContent:'',
				// 配送车牌号码
				name: '吉A581k2',
				// 包裹编号
				packageCode: '2020041532568',
				//表格
				packageCode: '',
				baoguonum:'',
				yannum:'',
				yanqiannum:'',
				yichangnum:'',
				DeliveredNumber:0,//已送达
				NonDeliveryNumber:0,//未送达
				imgurl:url()+'/wximg/confirm.jpg',
				errerTypeText:{exceptionCode:"",exceptionDescShow:false,exceptionDesc:""},
				dictionaryList:[],
				key: 0,
				headers2:[],
				contents2:[],
				loading:true,
				vertborder:false, //金融竖向条,但是不能去除头部
				// 表格数据
				headers: [{
					label: '品名',
					key: 'commodityName',
					width:220
				}, {
					label: '总数',
					key: 'numtext',
					width:160
				}, {
					label: '状态',
					key: 'commodityStatusName',
					width:130
				}, {
					label: '操作',
					key: 'look',
					width:130
				}],
				contents: [],
				urlCol: [{
					type: 'route',
					key: '1'
				}, {
					type: 'http',
					key: 'url'
				},
				{
					type: 'button',
					key: 'look'
				}]
			};
		},
		onLoad(options) {
			user=service.getUsers().user;
			let json = JSON.parse(decodeURIComponent(options.data));
			this.selectShopPackage(json);
			this.inItDictionary();
			//表格加载动画
			// this.wait(1000).then(() => {
			// 	this.headers2 = this.headers.slice()
			// 	this.contents2 = this.contents.slice()
			// 	this.loading = false
			// })
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
	　　        }).exec()
				}
			});		
		},
		methods: {
			backlast(){
				uni.navigateBack({
					delta: 1
				});
			},
			//表格
			onCellClick(e) {
				console.log("列表点击")
				console.log(e)
			/* 	this.event = this.jsonShowFn(e)
				this.$refs.modal.showModal() */
			},
			onCheck(e) {
				console.log("多选框点击")
				console.log(e)
			/* 	this.event = this.jsonShowFn(e)
				this.$refs.modal.showModal() */
			},
			// 关闭弹窗
			close(){
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
			},
			inItDictionary(){
			
				let  param ={
					d_type:"errerType"
				}
				let _this=this;  
				dictionaryList(param).then(res => {
					if (res.code == 200) {
					res.map.data.forEach(function(item){
						_this.dictionaryList.push(item);
					})
				
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			// 取消授权
			onButtonClick(e) {
				if(e.lineData.qePrictureUrl!=""&&e.lineData.qePrictureUrl!=undefined){
					this.imgurl=e.lineData.qePrictureUrl
				}else{
					this.imgurl=url()+'/wximg/confirm.jpg';
				}
				for(let i=0;this.dictionaryList.length>i;i++){
					if(this.dictionaryList[i].id==e.lineData.exceptionCode){
						this.errerTypeText.exceptionCode=this.dictionaryList[i].d_name
					
						if(this.dictionaryList[i].d_name=="其它"){
							this.errerTypeText.exceptionDesc=e.lineData.exceptionDesc;
							this.errerTypeText.exceptionDescShow=true;
							break;
						}else{
							this.errerTypeText.exceptionDescShow=false;
						}
						
					}
					
				}
			   let tableConfirm = this.$refs.tableConfirm
			   tableConfirm.open()
			/* 	this.event = this.jsonShowFn(e)
				this.$refs.modal.showModal() */
			},
			// 取消授权的是和否点击事件
			sureEmpower(){
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
			},
			cancelEmpower(){
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
			},
			selectShopPackage(json){//配送人员查询
				this.name = json.name
				let  param={
					shopid:json.e.lineData.shopId,
					userid:user.id
				};
				let thsi=this;
				selectShopPackage(param).then(res => {
					if (res.code == 200) {
						
						let ynum = 0
						let bgnum = 0
						let yanqian = 0
						let yichang = 0
						this.packageNumber=res.map.shopPackage.length;//渲染包裹个数
						res.map.shopPackage.forEach(function (item){
							bgnum++
							item.deliveryPackageRowList.forEach(function(items){
								if(parseInt(items.commodityType)==1){//判断类型
									items.numtext=items.num+"条"
									ynum+=parseInt(items.num)
								}else{
									items.numtext=items.num+"箱"
									ynum+=parseInt(items.num)*10
								}
								if(parseInt(items.commodityStatus)==3){
									thsi.abnormalNumber=thsi.abnormalNumber+1
									items.listState=true;
									items.listColor=[{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"}]
								    items.commodityStatusName="异常"
									items.look='查看';
									if(parseInt(items.commodityType)==1){//判断类型
										yichang+=parseInt(items.num)
									}else{
										yichang+=parseInt(items.num)*10
									}
									
								}else if(parseInt(items.commodityStatus)==2){
									thsi.VerifiedNubmer=thsi.VerifiedNubmer+1
									items.commodityStatusName="验签"
									if(parseInt(items.commodityType)==1){//判断类型
										yanqian+=parseInt(items.num)
									}else{
										yanqian+=parseInt(items.num)*10
									}
								}else if(parseInt(items.commodityStatus)==4){
								if(parseInt(items.commodityType)==1){//判断类型
									thsi.NonDeliveryNumber=thsi.NonDeliveryNumber+parseInt(items.num)
								}else{
									thsi.NonDeliveryNumber=thsi.NonDeliveryNumber+(parseInt(items.num)*10)
								}
								items.listState=true;
								items.listColor=[{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"}]
								items.commodityStatusName="未送达"
							}else if(parseInt(items.commodityStatus)==5){
								if(parseInt(items.commodityType)==1){//判断类型
									thsi.DeliveredNumber=thsi.DeliveredNumber+parseInt(items.num)
								}else{
									thsi.DeliveredNumber=thsi.DeliveredNumber+(parseInt(items.num)*10)
								}
								items.listState=true;
								items.listColor=[{"element":0,"color":"#4e4eff"},{"element":1,"color":"#4e4eff"},{"element":2,"color":"#4e4eff"},{"element":3,"color":"#4e4eff"}]
								items.commodityStatusName="已送达"
							}
							})
							thsi.contents.push(item);
						});
						this.yannum = ynum  + ' '
						this.baoguonum = bgnum  + ' '
						this.yanqiannum = yanqian  + ' '
						this.yichangnum = yichang  + ' '
						this.wait(1000).then(() => {
							this.headers2 = this.headers.slice()
							this.contents2 = this.contents.slice()
							this.loading = false
						})
						
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			}
		}

	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
	}

	/*配送车牌号*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		font-size: 32upx;
	}


	/* 待配送 已配送商户 */
	.model {
		width:79%;
		margin: 0 auto;
		margin-top: -129upx;
		padding: 35upx 6%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227, 227, 227, .5);
		position: relative;
	}
	.dataRap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.onlyOne {
		display: flex;
		align-items: center;
		width: 33.3%;
	}

	.modeline {
		width: 1px;
		height: 70upx;
		background-color: #eeeeee;
	}

	.modelrt {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #888888;
		white-space: nowrap;
		font-size: 21.84upx;
		text-align: center;
	}

	.psnums {
		color: #000;
		font-size: 28.08upx;
		margin-top: 5upx;
	}

	.psnum {
		color: #f69c3c;
		font-size: 47.32upx;
		font-weight: bold;
		margin-right: 10upx;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		margin-top: 44upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.table {
		width: 96%;
		margin: 0 auto;
		/* 下方的灰色分割线 */
		border-bottom: solid 14upx #eee;
		padding-bottom: 40upx;
		margin-bottom: 40upx;
	}
    /*包裹ID及包裹编号*/
	.bgName {
		padding:20upx 0; 
		line-height: 40upx;
		display: flex; 
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}
	/* 是否确认取消弹窗 */
	.popup-info {
		position: fixed;
		min-width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius:27upx;
		background-color: #fff;
		z-index: 9999;
	}
	 .popuptitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	.close {
		position: absolute;
		top:-75upx;
		left:10upx;
	}
	.close image {
		width:37upx;
		height:37upx;
	}
	.imgWra {
		width: 80%; 
		margin:80upx auto;
	}
	
	.up-check {
		width:500upx ;
		height: 500upx;
	}
	.up-check image {
		width: 100%;
		height: 100%;
	}
	/* 弹窗按钮 */
	.btnPat {
		width: 100%;
		display: flex;
		flex:1;
		flex-direction:row;
	}
	.btn {
		width: 90%;
		background-color: #ffc562;
		border-radius: 200upx;
		margin:40upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
		color: #fff;
	}
	.btn::after{
		border: none;
	}
</style>
